<template>
	<view @touchstart="start" @touchend="end">
		<!-- <cu-custom bgColor="text-156" :isBack="true">
			<block slot="content">数据查询</block>
			<view slot="right" style="display: flex;">
				<view style="margin-right: 20upx;" @click="showDrawer">
					<uni-icons type="settings" size="20"></uni-icons>
				</view>
			</view>
		</cu-custom> -->
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">数据查询</text>
				<view style="margin-left: 10upx;" @click="showDrawer">
					<uni-icons type="search" size="16" color="#156DAC"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<!-- <SearchTimeBar/> style="overflow: auto;height: calc(100vh - 380upx);margin-top: 10upx;"-->
		<!-- style="padding-top: 15upx;" -->
		<view class="content padding">
			<view class="page-flex-title">
				<!-- <view @click="switchBroken">切换折线图</view> -->
				<view @click="switchBroken">{{switchState?"切换折线图":"切换列表"}}</view>
				<!-- 当前排口： -->
				<lb-picker v-model="query.outletId" :list="outlets" :props="pickerProps"
					@confirm="(e)=>pickerSelectConfim('outlet',e)" @show="state2" @hide="state3">
					<view slot="header-top">
						<view style="padding: 10upx;">
							<uni-easyinput type="text" v-model="searchText" placeholder="请输入关键字" prefixIcon="search"
								@input="searchOutlet" />
						</view>
					</view>
					<view class="lb-picker-placeholder-panel" style="text-align: right;line-height: 1.2;">
						<text v-if="query.outletName" style="border: 0;"
							class="lb-picker-text">{{query.outletName}}</text>
						<text v-else class="lb-picker-placeholder" style="border: 0;">请选择排口</text>
						<uni-icons class="icon" type="forward" size="20" color="#999"></uni-icons>
					</view>
				</lb-picker>
			</view>
			<view v-show="!switchState&&allSwitchState" class="qiun-charts">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			</view>
			<view v-show="switchState&&allSwitchState" class="page-content-list">
				<scroll-view style="height: calc(100vh - 280upx);" scroll-y="true" :refresher-enabled="enabled"
					:refresher-threshold="50" :refresher-triggered="triggered" @refresherpulling="onPulling"
					@refresherrefresh="onRefresh" @scrolltolower="handleLoadMore" @scroll="scroll">
					<block v-for="(item, index) in listData" :key="item.id">
						<view class="content-list-cell" @click="showQueryDetail(item)">
							<view class="order-item">
								<view class="order-item-header header-time">
									<view class="label">{{item.realTimeStr}}</view>
								</view>
								<view class="order-item-content child-flex-1">
									<template v-if="queryType > 1">
										<view class="order-content-row">
											<view class="label" style="text-align: center;">类型</view>
											<view style="flex: 1;">
												<view class="label" style="text-align: center;">平均值</view>
											</view>
											<view style="flex: 1;">
												<view class="label" style="text-align: center;">排放量</view>
											</view>
											<view style="flex: 1;">
												<view class="label" style="text-align: center;">最大值</view>
											</view>
											<view style="flex: 1;">
												<view class="label" style="text-align: center;">最小值</view>
											</view>
										</view>
									</template>
									<view v-for="(dto,idx) in item.factorDtoList" :key="idx">
										<view class="order-content-row">
											<view class="label">
												{{dto.name}}{{dto.measurementUnitName?'('+dto.measurementUnitName+')':''}}
											</view>
											<template v-if="dto.val!=null">
												<view class="value"
													:class="dto.zsVal!=null ? '':colorMap2[dto.dataStatus]?colorMap2[dto.dataStatus]:''">
													{{returnFloat(dto.val)}}
												</view>
											</template>
											<template v-else>
												<view class="flex-table-item">
													<view class="value text-center">
														{{dto.avgVal!==null? returnFloat(dto.avgVal):'- -'}}
													</view>
													<!-- <view v-if="dto.avgVal" class="label" >{{dto.measurementUnitName}}</view> -->
												</view>
												<view class="flex-table-item">
													<view class="value text-center">
														{{dto.emissionsVal!==null? returnFloat(dto.emissionsVal):'- -'}}
													</view>
													<!-- <view v-if="dto.emissionsVal" class="label" >{{dto.measurementUnitName}}</view> -->
												</view>
												<view class="flex-table-item">
													<view class="value text-center">
														{{dto.maxVal!==null? returnFloat(dto.maxVal):'- -'}}
													</view>
													<!-- <view v-if="dto.maxVal" class="label" >{{dto.measurementUnitName}}</view> -->
												</view>
												<view class="flex-table-item">
													<view class="value text-center">
														{{dto.minVal!==null? returnFloat(dto.minVal):'- -'}}
													</view>
													<!-- <view v-if="dto.minVal" class="label" >{{dto.measurementUnitName}}</view> -->
												</view>
											</template>
										</view>
										<view class="order-content-row"
											v-if="dto.zsVal!=null||dto.zsAvgVal!=null||dto.zsEmissionsVal!=null||dto.zsMaxVal!=null||dto.zsMinVal!=null">
											<view class="label">
												{{dto.name}}折算{{dto.measurementUnitName?'('+dto.measurementUnitName+')':''}}
											</view>
											<template v-if="dto.zsVal!==null">
												<view class="value"
													:class="colorMap2[dto.dataStatus]?colorMap2[dto.dataStatus]:''">
													{{returnFloat(dto.zsVal)}}
												</view>
											</template>
											<template v-else>
												<view class="flex-table-item">
													<view class="value text-center">
														{{dto.zsAvgVal!==null? returnFloat(dto.zsAvgVal):'- -'}}
													</view>
												</view>
												<view class="flex-table-item">
													<view class="value text-center">
														{{dto.zsEmissionsVal!==null? returnFloat(dto.zsEmissionsVal):'- -'}}
													</view>
												</view>
												<view class="flex-table-item">
													<view class="value text-center">
														{{dto.zsMaxVal!==null? returnFloat(dto.zsMaxVal):'- -'}}
													</view>
												</view>
												<view class="flex-table-item">
													<view class="value text-center">
														{{dto.zsMinVal!==null? returnFloat(dto.zsMinVal):'- -'}}
													</view>
												</view>
											</template>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
					<uni-load-more :status="status" :icon-size="14" :content-text="contentText"
						style="height: 60upx;" />
				</scroll-view>
			</view>

		</view>

		<uniDrawer ref="draw" :mask="true" mode='right' :width="250" @change="state">
			<view style="height: 90upx;">&nbsp;</view>
			<view class="draw-panel">
				<view class="drawer-form">
					<view class="drawer-form-item">
						<view class="drawer-label"><text>开始时间</text></view>
						<view class="drawer-content">
							<TimeSelector ref="stime" class="ipt-ctl" :showType="timePickerType"
								@btnConfirm="(e)=>dateChange(e,'startDate')">
								<text>{{query.startDate || '请选择开始时间'}}</text>
							</TimeSelector>
						</view>
					</view>
					<view class="drawer-form-item">
						<view class="drawer-label"><text>结束时间</text></view>
						<view class="drawer-content">
							<TimeSelector ref="etime" class="ipt-ctl" :showType="timePickerType"
								@btnConfirm="(e)=>dateChange(e,'endDate')">
								<text>{{query.endDate || '请选择结束时间'}}</text>
							</TimeSelector>
						</view>
					</view>
					<view class="drawer-form-item">
						<view class="drawer-label"><text>排口</text></view>
						<view class="drawer-content">
							<text @click="showPkPicker"
								style="padding-right: 30px;">{{query.outletName || '请选择排口'}}</text>
							<tki-tree class="ipt-ctl" ref="tkitree" :range="range" :rangeKey="rangeKey"
								confirmColor="#4e8af7" @confirm="pkConfirm" />
						</view>
					</view>
				</view>
				<view class="operation-panel" style="padding: 20upx;">
					<view class="item-btn" :class="chooseQueryType === 1?'':'white'" @click="changeQueryType(1)">
						<uniIcons class="icon" type="camera-filled" size="20"
							:color="chooseQueryType === 1?'#fff':'#156dac'" />
						<text>实时数据</text>
					</view>
					<view class="item-btn" :class="chooseQueryType === 2?'':'white'" @click="changeQueryType(2)">
						<uniIcons class="icon" type="flag-filled" size="20"
							:color="chooseQueryType === 2?'#fff':'#156dac'" />
						<text>分钟数据</text>
					</view>
					<view class="item-btn" :class="chooseQueryType === 3?'':'white'" @click="changeQueryType(3)">
						<view class="font-icon" :class="chooseQueryType === 3?'active':''">H</view>
						<text>小时数据</text>
					</view>
					<view class="item-btn" :class="chooseQueryType === 4?'':'white'" @click="changeQueryType(4)">
						<view class="font-icon" :class="chooseQueryType === 4?'active':''">D</view>
						<text>日数据</text>
					</view>
					<view class="item-btn" :class="chooseQueryType === 5?'':'white'" @click="changeQueryType(5)">
						<view class="font-icon" :class="chooseQueryType === 5?'active':''">M</view>
						<text>月数据</text>
					</view>
					<view class="item-btn" :class="chooseQueryType === 6?'':'white'" @click="changeQueryType(6)">
						<view class="font-icon" :class="chooseQueryType === 6?'active':''">Y</view>
						<text>年数据</text>
					</view>
					<view class="item-btn" :class="chooseQueryType === 7?'':'white'" @click="changeQueryType(7)">
						<view class="font-icon" :class="chooseQueryType === 7?'active':''">超</view>
						<text>超标数据</text>
					</view>
				</view>
				<view class="bottom-panel">
					<!-- <view class="item-btn green lp" @click="clearQuery"><text>重置</text></view> -->
					<view class="item-btn lp" @click="handleQuery"><text>确定</text></view>
				</view>
			</view>
		</uniDrawer>
		<ourLoading isFullScreen color="#156dac" :active="pageLoading" />
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	// import SearchTimeBar from '../components/SearchTimeBar.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import {
		parseTime
	} from '@/common/util.js'
	import ourLoading from '@/components/our-loading/our-loading.vue'
	import LbPicker from '@/components/lb-picker'

	const listQuery = '/dataQuery/realtime/selectRealtimeData' //实时
	const listBrokenQuery = '/dataQuery/realtime/selectRealtimeBrokenData'
	const minuteQuery = '/dataQuery/minutetime/selectMinutetimeData' //分钟
	const minuteBrokenQuery = '/dataQuery/minute/selectMinuteBrokenData'
	const hourQuery = '/dataQuery/hourData/selectHourData' //小时
	const hourBrokenQuery = '/dataQuery/hour/selectHourBrokenData'
	const dayQuery = '/dataQuery/dayData/selectDayData' //天
	const dayBrokenQuery = '/dataQuery/day/selectDayBrokenData'
	const mouthQuery = '/dataQuery/mouthData/selectMouthData' //月
	// const mouthBrokenQuery = '/dataQuery/mouthData/selectMouthData'
	const yearQuery = '/dataQuery/yearData/selectYearData' //年
	// const yearBrokenQuery = '/dataQuery/yearData/selectYearData'

	const chaoQuery = '/dataQuery/overStandard/selectOverStandardDataDto'

	const getTree = '/base/outlet/listTree'
	// 折线图
	var _self;
	var canvaLineA = null;
	export default {
		components: {
			// SearchTimeBar,
			ourLoading,
			uniIcons,
			uniLoadMore,
			uniDrawer,
			TimeSelector,
			tkiTree,
			uniNavBar,
			LbPicker
		},
		data() {
			return {
				enabled: true,
				triggered: false,
				reload: false,
				pickFlag: true,
				pageLoading: false,
				listData: [],
				column: [],
				last_id: '',
				status: 'loading',
				range: [],
				rangeKey: 'name',
				timePickerType: 'dateToTime',
				scroll_refresher_enabled: false,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				searchText: '',
				query: {
					page: 1,
					limit: 10,
					startDate: '',
					endDate: '',
					outletId: null,
					outletName: ''
				},
				outlets: [],
				outletsBak: [],
				outletsIndex: 0,
				chooseQueryType: 1,
				queryType: 1,
				startData: {
					clientX: 0,
					clientY: 0
				},
				pickerProps: {
					label: 'name',
					value: 'id',
				},
				colorMap2: {
					'e047_01': 'outlet-over-standard',
					'e047_02': 'outlet-constant-value',
					'e047_03': '',
					'e047_04': 'outlet-fault',
				},
				// 折线图
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				// 表格折线图显示状态 1表格 2折线图
				switchState:true,
				allSwitchState:true
			}
		},
		onLoad() {
			this.getTreeData();
			// this.getList();
			const time = parseTime(new Date(), '{y}-{m}-{d}')
			this.query.startDate = time + ' ' + '00:00:00'
			this.query.endDate = time + ' ' + '23:59:59'
			// 折线图
			_self = this;
			// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
			this.cWidth = uni.upx2px(690);
			this.cHeight = uni.upx2px(1100);
			// this.getServerData();
		},
		onPullDownRefresh() {
			this.last_id = '';
			this.listData = []
			this.query.page = 1
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 100)
		},
		onReachBottom() {

		},
		methods: {
			state(){
				console.log(this.$refs.draw.showDrawer)
				if(!this.switchState&&this.$refs.draw.showDrawer){
					this.allSwitchState = false;
				}else{
					this.allSwitchState = true;
				}
			},
			state2(){
				if(!this.switchState){
					this.allSwitchState = false;
				}else{
					this.allSwitchState = true;
				}
			},
			state3(){
				this.allSwitchState = true;
			},
			returnFloat(value) { //格式化数据 统一小数点后三位，不足的补
				if (value > 9999) {
					return Math.round(value)
				}
				var value = Math.round(parseFloat(value) * 1000) / 1000;
				var xsd = value.toString().split(".");
				if (xsd.length == 1) {
					value = value.toString() + ".000";
					return value;
				}
				if (xsd.length > 1) {
					if (xsd[1].length == 1) {
						value = value.toString() + "00";
						return value;
					} else {
						if (xsd[1].length == 2) {
							value = value.toString() + "0";
						}
						return value;
					}
				}
			},
			searchOutlet() {
				if (this.outletsBak.length === 0) {
					this.outletsBak = this.outlets
				}
				const newList = this.outletsBak.filter(item => item.name.indexOf(this.searchText) !== -1)
				this.outlets = newList
			},
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				// console.log(e)
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subY > 50 || subY < -50) {
					// console.log('上下滑')
				} else {
					if (!this.pageLoading) {
						if (subX > 50) {
							// console.log('右滑')
							const i = this.outletsIndex - 1
							if (i >= 0) {
								this.pageLoading = true
								this.outletsIndex = i
								const {
									id,
									name
								} = this.outlets[i]
								this.query.outletId = id
								this.query.outletName = name
								this.getList()
								this.getServerData()
							}
						} else if (subX < -50) {
							console.log('左滑')
							// this.showDrawer()
							const i = this.outletsIndex + 1
							if (i < this.outlets.length) {
								this.pageLoading = true
								this.outletsIndex = i
								const {
									id,
									name
								} = this.outlets[i]
								this.query.outletId = id
								this.query.outletName = name
								this.getList()
								this.getServerData()
							}
						} else {
							// console.log('无效')
						}
					}
				}
			},
			handleLoadMore() {
				if (this.status === 'loading') return
				this.query.page = this.query.page + 1
				this.getList(true);
			},
			scroll(e) {
				if (e.detail.scrollTop === 0) {
					this.scroll_refresher_enabled = true
				} else {
					this.scroll_refresher_enabled = false
				}
			},
			onPulling() {},
			onRefresh() {
				this.triggered = true
				if (this.status === 'loading') {
					this.$nextTick(() => {
						this.triggered = false
					});
					return
				}
				if (!this.scroll_refresher_enabled) {
					this.$nextTick(() => {
						this.triggered = false
					});
					return
				}
				this.last_id = '';
				this.listData = []
				this.query.page = 1

				this.getList();
			},
			pageback() {
				uni.navigateBack({
					delta: 1
				});
			},
			clearQuery() {
				this.query.startDate = ''
				this.query.endDate = ''
				this.query.outletId = null
			},
			handleQuery() {
				const {
					outletId
				} = this.query
				if (outletId) {
					this.queryType = this.chooseQueryType
					this.query.page = 1
					this.listData = []
					this.getList();
					this.getServerData();
					this.$refs.draw.close()
				} else {
					this.$api.toastMsg('请选择排口')
				}
			},
			dateChange(res, type) {
				debugger
				this.query[type] = res.key
			},
			showDrawer() {
				// 校对选择的类型
				// this.chooseQueryType = this.queryType
				this.$refs.draw.open()
			},
			showQueryDetail(item) {
				// if(this.queryType > 1){
				// 	uni.navigateTo({
				// 		url:`/pages/query/components/queryDetail`,
				// 		success: (res)=>{
				// 			res.eventChannel.emit('queryDetail', { data: item })
				// 		}
				// 	})
				// }
			},
			handleAdd() {

			},
			showPkPicker() {
				this.$refs.tkitree._show()
			},
			pkConfirm(e) {
				console.log(e)
				if (e.length > 0) {
					const {
						id,
						name
					} = e[0]
					this.query.outletId = id
					this.query.outletName = name
				}
			},
			getFirstNode(tree) {
				tree.forEach(arr => {
					this.recursion(arr)
				})
			},
			pickerSelectConfim(key, e) {
				this.pageLoading = true
				const {
					item
				} = e
				const {
					id,
					name
				} = item
				this.outletsIndex = e.index
				this.query[key + 'Id'] = id
				this.query[key + 'Name'] = name
				this.getList()
				this.getServerData()
				// this.pageLoading = false
			},
			recursion(arr) {
				if (arr.children && arr.children.length > 0) {
					arr.children.forEach(element => {
						this.recursion(element)
					})
				} else {
					this.outlets.push({
						id: arr.id,
						name: arr.name
					})
				}
			},
			getTreeData() {
				this.$api.request(getTree, {
					method: 'get',
				}).then(res => {
					console.log(res)
					if (res.success) {
						// 过滤无排口数据
						const result = []
						res.data.list.map(item => {
							if (item.children && item.children.length > 0) {
								result.push(item)
							}
						})
						this.range = result
						// 获取排口数组
						this.getFirstNode(result)
						if (this.outlets.length > 0) {
							const {
								id,
								name
							} = this.outlets[0]
							this.query.outletId = id
							this.query.outletName = name
							this.getList()
							this.getServerData()
						} else {
							this.status = ''
						}
					}
				}).catch(() => {})
			},
			changeTimeType(v) {
				this.$refs.stime.handleChangeType(v)
				this.$refs.etime.handleChangeType(v)
			},
			changeQueryType(i) {
				this.chooseQueryType = i
				const time = parseTime(new Date(), '{y}-{m}-{d}')
				const arr = time.split('-')
				switch (i) {
					case 1:
						this.timePickerType = 'dateToTime'
						this.query.startDate = time + ' ' + '00:00:00'
						this.query.endDate = time + ' ' + '23:59:59'
						break;
					case 2:
						this.timePickerType = 'yearToMinute'
						this.query.startDate = time + ' ' + '00:00'
						this.query.endDate = time + ' ' + '23:59'
						break;
					case 3:
						this.timePickerType = 'yearToHour'
						this.query.startDate = time + ' ' + '00'
						this.query.endDate = time + ' ' + '23'
						break;
					case 4:
						this.timePickerType = 'date'

						var beforeTime = new Date().getTime() - 1000 * 60 * 60 * 24 * 10;
						var before = parseTime(new Date(beforeTime), '{y}-{m}-{d}');

						this.query.startDate = before
						this.query.endDate = time
						break;
					case 5:
						this.timePickerType = 'yearToMonth'
						this.query.startDate = arr[0] + '-' + '01'
						this.query.endDate = arr[0] + '-' + arr[1]
						break;
					case 6:
						this.timePickerType = 'year'
						this.query.startDate = arr[0]
						this.query.endDate = arr[0]
						break;
					case 7:
						this.timePickerType = 'date'
						this.query.startDate = time
						this.query.endDate = time
						break;
				}
				this.changeTimeType(this.timePickerType)
				console.log(this.timePickerType, this.pickFlag)
			},
			getList(loadMore = false) {
				// if (this.last_id) {
				//说明已有数据，目前处于上拉加载
				this.status = 'loading';
				// }
				let url = listQuery
				switch (this.queryType) {
					case 1:
						url = listQuery;
						this.timePickerType = 'dateToTime'
						break;
					case 2:
						url = minuteQuery;
						this.timePickerType = 'dateToTime'
						break;
					case 3:
						url = hourQuery;
						this.timePickerType = 'hour'
						break;
					case 4:
						url = dayQuery;
						this.timePickerType = 'day'
						break;
					case 5:
						url = mouthQuery;
						this.timePickerType = 'month'
						break;
					case 6:
						url = yearQuery;
						this.timePickerType = 'year'
						break;
					case 7:
						url = chaoQuery;
						this.timePickerType = 'day'
						break;
				}
				this.$api.request(url, {
					method: 'get',
					data: this.query
				}).then(res => {
					// console.log(res)
					if (res.success) {
						const data = res.data
						// this.formObj = res.data
						// this.steps = res.data.alarmProcesses.map(item=>{
						// 	return {
						// 		title: item.operationContent, desc: item.operationTime
						// 	}
						// })
						const {
							column,
							page
						} = data
						this.column = column
						if (column.length === 0 || page.records.length === 0 || page.total <= this.query.limit) {
							this.status = ''
						} else {
							this.status = 'more'
						}
						if (loadMore) {
							this.listData = [...this.listData, ...page.records]
						} else {
							console.log(page.records)
							this.listData = page.records
						}
						this.last_id = this.listData[this.listData.length - 1];
						console.log(this.column)
						console.log(this.listData)
						this.reload = false;
						this.triggered = false
						this.pageLoading = false
						this.$nextTick(() => {
							this.triggered = false
						});


					}
				}).catch(() => {
					this.status = 'more'
				})
				// setTimeout(()=>{
				// 	let list = []
				// 	const length = this.listData.length
				// 	for(let i=length,len=length + 5;i<len;i++){
				// 		list.push(i)
				// 	}
				// 	this.listData = this.reload ? list : this.listData.concat(list);
				// 	this.last_id = list[list.length - 1];
				// 	this.reload = false;
				// },2000)
			},
			// 折线图
			// 获取数据，发请求
			getServerData() {
				const dtList = []
				const series = []
				//说明已有数据，目前处于上拉加载
				this.status = 'loading';
				// }
				let url = listBrokenQuery;
				let timeSymbol = "";
				console.log(this.queryType)
				switch (this.queryType) {
					case 1:
						url = listBrokenQuery;
						this.timePickerType = 'dateToTime'
						timeSymbol = '{y}-{m}-{d} {h}:{i}';
						break;
					case 2:
						url = minuteBrokenQuery;
						this.timePickerType = 'dateToTime'
						timeSymbol = '{y}-{m}-{d} {h}:{i}';
						break;
					case 3:
						url = hourBrokenQuery;
						this.timePickerType = 'hour'
						timeSymbol = '{y}-{m}-{d} {h}';
						break;
					case 4:
						url = dayBrokenQuery;
						this.timePickerType = 'day'
						timeSymbol = '{y}-{m}-{d}';
						break;
					case 5:
						url = mouthQuery;
						this.timePickerType = 'month'
						timeSymbol = '{y}-{m}';
						break;
					case 6:
						url = yearQuery;
						this.timePickerType = 'year'
						timeSymbol = '{y}';
						break;
					case 7:
						url = chaoQuery;
						this.timePickerType = 'day'
						break;
				}
				console.log(url)
				this.$api.request(url, {
					method: 'get',
					data: this.query
				}).then(res => {
					console.log(res.data)
					if (res.success) {
						const data = res.data
						// {y}-{m}-{d} {h}:{i}:{s}
						// const time = parseTime(1633932120000, '{i}:{s}');
						// console.log(time)

						if (data.data) {//实、分、小、日
							let LineA = {
								categories: [],
								series: data.data.series
							};
							console.log(data.data.dtList.length)
							// for (let i = 0; i < data.data.dtList.length; i++) {
							// 	console.log(timeSymbol)
							// 	// let time = ;
							// 	LineA.categories.push(parseTime(data.data.dtList[i], timeSymbol));
							// }
							data.data.dtList.forEach((item,index) => {
								LineA.categories.push(parseTime(data.data.dtList[index], timeSymbol));
								// LineA.categories.push(parseTime(data.data.dtList[index]));
							})
							_self.showLineA("canvasLineA", LineA);
							return;
						}
						if (data.column) {//月、年
							data.column.forEach(column => {
								series.push({
									data: [],
									name: [column.label + column.measurementUnitName]
								})
							})
							data.page.records.forEach(item => {
								dtList.push(parseTime(item.realTime, timeSymbol));
							})
							var i = 0
							series.forEach(serie => {
								data.page.records.forEach(item => {
									serie.data.push(item.factorDtoList[i].emissionsVal)
								})
								i++
							})
							this.chartData = {
								categories: dtList,
								series: series
							}
							_self.showLineA("canvasLineA", this.chartData);
						}

						// this.$refs.chars.initChart(data, '{y}')
						// }
					}
				}).catch(() => {})
				// console.log(res.data.data.LineA, res.data.data.LineA.categories)

				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 自己可以定义数据

				// let LineA = {
				// 	categories: [],
				// 	series: []
				// };
				// LineA.categories = ['2010', '2012', '2014', '2016', '2018', '2020'];
				// LineA.series = [{
				// 	name: "南京",
				// 	data: [12, 15, 10, 18, 6, 13],
				// 	color: '#409eff'
				// }, {
				// 	name: "苏州",
				// 	data: [15, 6, 13, 18, 8, 14],
				// 	color: '#e6a23c'
				// }, {
				// 	name: "无锡",
				// 	data: [13, 12, 13, 16, 9, 10],
				// 	color: '#f56c6c'
				// }];

				// LineA.categories = res.data.data.LineA.categories;
				// LineA.series = res.data.data.LineA.series;
				// 找到id为canvasLineA的块
			},
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					rotate: true,
					dataPointShape:false,//隐藏点
					// x轴显示的内容
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						// rotateLabel: true,
						labelCount:3
					},
					// y轴显示的内容
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			// 点击图表显示的内容
			touchLineA(e) {
				// 使用声明的变量canvaLineA
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				canvaLineA.touchLegend(e);//点击事件
			},
			switchBroken(){
				this.switchState = !this.switchState;
				if(!this.switchState){
					this.getServerData();
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.draw-panel {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100vh - 90upx);

		.operation-panel,
		.bottom-panel {
			padding: 40upx 20upx;

			.item-btn {
				width: 100%;
				position: relative;
				background-color: #156dac;
				color: #fff;
				text-align: center;
				height: 80upx;
				line-height: 80upx;
				border-radius: 10upx;
				margin-bottom: 20upx;

				&.lp {
					letter-spacing: 10upx;
				}

				&.green {
					background-color: #5eb00e;
					color: #fff;
				}

				&.white {
					background-color: #fff;
					color: #156dac;
					border: 1px solid #156DAC;
				}

				.font-icon {
					position: absolute;
					top: 15upx;
					left: 30upx;
					width: 50upx;
					text-align: center;
					border-radius: 50%;
					height: 50upx;
					line-height: 50upx;
					background-color: #156dac;
					color: #fff;

					&.active {
						background-color: #fff;
						color: #156dac;
					}
				}

				.icon {
					position: absolute;
					left: 30upx;
				}
			}
		}

		.left-panel {}
	}

	.page-flex-title {
		padding-bottom: 5px;
		top: 0;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.page-content-list {
		position: relative;
		width: 100%;
		flex-direction: column;
		overflow: hidden;

		.content-list-cell {
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.order-item {
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;

		.order-item-content {
			margin-top: 30upx;

			&.child-flex-1 {
				.order-content-row {
					flex: 1;
				}
			}

			.flex-table-item {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;

				.label {
					text-align: center;
					font-size: 24upx;
				}
			}

			.order-content-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 30upx;

				.order-btn {
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}

				.label {
					// flex: 0 0 200upx;
					flex: 1;
					color: #156DAC;
					text-align: left;
					font-size: 26upx;
				}

				.value {
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;

					&.text-center {
						text-align: center;
					}
				}
			}

		}

		.order-item-header {
			display: flex;
			align-items: center;

			.icon {
				margin-right: 10upx;
			}

			text {
				color: #333;
				font-size: 28upx;
			}
		}
	}

	.qiun-charts {
		width: 690upx;
		height: 1100upx;
		background-color: #FFFFFF;

		.charts {
			width: 690upx;
			height: 1100upx;
			background-color: #FFFFFF;
		}
	}
</style>
